import React, {
	PureComponent
} from 'react'
import { connect } from 'dva'
import moment from 'moment'
import { Form, Input, Button, Select, DatePicker } from 'antd'
import Grid from '@/components/Grid'
import Dialog from '@/components/Dialog'
import settings, { getPagination } from '@/settings'

@Form.create()
@connect(({ field: { data } }) => ({ data }))
class ModelForm extends React.Component {
	formLayout = {
		// labelAlign: 'left',
		// labelCol: {
		// 	span: 5
		// },
		// wrapperCol: {
		// 	span: 19
		// },
	};
	componentDidMount() {
		const {
			id,
			dispatch
		} = this.props;

		if (id) {
			dispatch({
				type: 'field/fetchOne',
				payload: {
					id
				}
			});
		}
	};
	handleSubmit = e => {

	};
	render() {
		const {
			data = {},
			form: {
				getFieldDecorator
			}
		} = this.props

		return (
			<Form onSubmit={this.handleSubmit} layout="vertical">
			{/*<Form onSubmit={this.handleSubmit}>*/}
	          <Form.Item label="用户名称" {...this.formLayout}>
	            {getFieldDecorator('name', {
	              rules: [{ required: true, message: '请输入用户名称' }],
	              initialValue: data.name,
	            })(<Input placeholder="请输入" />)}
	          </Form.Item>
	          <Form.Item label="开始时间" {...this.formLayout}>
	            {getFieldDecorator('date', {
	              rules: [{ required: true, message: '请选择开始时间' }],
	              initialValue: data.date ? moment(data.date) : null,
	            })(
	              <DatePicker
	                showTime
	                placeholder="请选择"
	                format="YYYY-MM-DD HH:mm:ss"
	                style={{ width: '100%' }}
	              />
	            )}
	          </Form.Item>
	          <Form.Item label="任务负责人" {...this.formLayout}>
	            {getFieldDecorator('owner', {
	              rules: [{ required: true, message: '请选择任务负责人' }],
	              initialValue: data.owner,
	            })(
	              <Select placeholder="请选择">
	                <Select.Option value="付晓晓">付晓晓</Select.Option>
	                <Select.Option value="周毛毛">周毛毛</Select.Option>
	              </Select>
	            )}
	          </Form.Item>
	          <Form.Item {...this.formLayout} label="产品描述">
	            {getFieldDecorator('desc', {
	              rules: [{ message: '请输入至少五个字符的产品描述！', min: 5 }],
	              initialValue: data.desc,
	            })(<Input.TextArea rows={4} placeholder="请输入至少五个字符" />)}
	          </Form.Item>
	        </Form>
		)
	}
}

@connect(({
	field: {
		list = {},
		params
	},
	loading
}) => ({
	list,
	params,
	loading: loading.effects['field/fetchAll'],
}))
@Form.create()
class ListPage extends PureComponent {
	state = {
		selectedRows: []
	};
	columns = [{
		title: '部门',
		dataIndex: 'name',
		width: 200,
		sorter: true
	}, {
		title: '创建时间',
		dataIndex: 'date',
		width: 150,
		align: 'center'
	}];
	componentDidMount() {
		const {
			dispatch
		} = this.props;
		dispatch({
			type: 'field/fetchAll',
		});
	};
	handleSelectRows = rows => {
		this.setState({
			selectedRows: rows,
		});
	};
	handleAdd = e => {
		const {
			dispatch
		} = this.props;
		dispatch({
			type: 'field/updateState',
			payload: {
				data: undefined
			}
		});
		Dialog.open({
			title: '新建任务',
			component: ModelForm
		})
	};
	handleEdit = e => {
		const { selectedRows } = this.state;
		const { id } = selectedRows[0];
		Dialog.open({
			title: '修改任务',
			component: props => (<ModelForm {...props} id={id} />),
			connect: ({ loading }) => ({ loading: loading.effects['field/fetchOne'] })
		})
	};
	handleRemove = e => {
		Dialog.confirm({
			title: '删除任务',
			content: '确定删除该任务吗？',
			onOk() {
				console.log('删除成功')
			}
		})
	};
	handleGridChange = (oldPagination, sorter) => {
		const { params, dispatch } = this.props;
		
		const pagination = getPagination(oldPagination)
		const payload = {
			...params,
			...pagination
		}

		if (sorter.field) {
			payload.sorter = sorter.field
			payload.order = sorter.order
		}

		dispatch({
			type: 'field/fetchAll',
			payload,
		})
	};
	handleReload = () => {
		const { params, dispatch } = this.props;
		dispatch({
			type: 'field/fetchAll',
			payload: params
		})
	};
	handleSearch = (value, e) => {
		e.preventDefault();
		const { params, dispatch } = this.props;
		const pagination = getPagination({
			pageNumber: 1
		})
		dispatch({
			type: 'field/fetchAll',
			payload: {
				...params,
				...pagination,
				name: value
			}
		})
	};
	render() {
		const { selectedRows } = this.state;
		const {
			params,
			// form: {
			// 	getFieldDecorator
			// },
			loading,
			list: {
				data,
				total
			}
		} = this.props

		const pageNumber = params[settings.pageNumber]
		return (
			<div className="x-wrap">
				<div className="x-panel">
					<div className="x-toolbar">
						<div className="fl">
							<Button.Group>
								<Button type="primary" onClick={this.handleAdd}>新建</Button>
								<Button onClick={this.handleEdit} disabled={selectedRows.length !== 1}>编辑</Button>
								<Button type="danger" disabled={selectedRows.length === 0} onClick={this.handleRemove}>删除</Button>
							</Button.Group>
						</div>
						<div className="fr x-query">
							<Form layout="inline">
								<Input.Search placeholder="请输入要查询的关键词" onSearch={this.handleSearch} />
							</Form>
						</div>
					</div>
					<div className="x-fixed">
						<Grid 
						selectedRows={selectedRows} 
						onSelectRow={this.handleSelectRows} 
						columns={this.columns} 
						data={data}
						loading={loading}
						pagination={{
							pageNumber,
							total
						}}
						onReload={this.handleReload}
						onChange={this.handleGridChange} />
					</div>
				</div>
			</div>
		)
	}
}

export default ListPage